<template>
	<div class="region" style="width: 100%">
		<!-- <u-input v-model="regionValue" type="select" :select-open="show" :border="false" @click="open" placeholder="省市区" placeholder-style="color:#888a88" />
		<u-picker mode="region" v-model="show" :default-region="defaultRegion" @confirm="onConfirm"></u-picker> -->
		<u-input v-model="regionValue" type="select" :select-open="show" :border="false" @click="toggle" :placeholder="placeholder" placeholder-style="color:#888a88" />
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<view class="picker-btn">
					<view class="left" @click="cancel">取消</view>
					<view class="right" @click="confirm">确定</view>
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="valueArr" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item, index) in region" :key="index">{{ item.name }}</view>
					</picker-view-column>
					<picker-view-column v-if="region[valueArr[0]]">
						<view class="item" v-for="(item, index) in region[valueArr[0]].children" :key="index">{{ item.name }}</view>
					</picker-view-column>
					<picker-view-column v-if="region[valueArr[0]]">
						<view class="item" v-for="(item, index) in region[valueArr[0]].children[valueArr[1]].children" :key="index">{{ item.name }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</div>
</template>

<script>
import { region } from "@/uni/uni.js"
import mixin from "@/mixin"
export default {
	mixins: [mixin],
	name: "vRegion",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: [Array, String],
			default: () => [],
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		placeholder: {
			type: String,
			default: "请选择省市区",
		},
		delbtn: {
			type: Boolean,
			default: false,
		},
		type: {
			type: String,
			default: "1", //1:自定义表单/流程表单提交 2:表单数据回显
		},
	},
	data() {
		return {
			show: false,
			regionValue: "",
			defaultRegion: [],
			indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`,
			valueArr: [0, 0, 0], // 用于判断当前滑动的是哪一列
			region: [], // 数据列表
			regionName: "",
		}
	},

	components: {},

	computed: {},
	created() {
		this.initLoadArea()
	},
	methods: {
		initLoadArea() {
			region().then(res => {
				this.region = res
			})
		},

		// open() {
		// 	this.show = true
		// },
		// onConfirm(e) {
		// 	this.defaultRegion[0] = e.province.label
		// 	this.defaultRegion[1] = e.city.label
		// 	this.defaultRegion[2] = e.area.label
		// 	this.regionValue = `${e.province.label}-${e.city.label}-${e.area.label}`
		// },
		toggle() {
			if (this.delbtn) return
			this.$refs.popup.open()
		},
		bindChange(e) {
			const val = e.detail.value
			if (val[0] !== this.valueArr[0]) {
				val[1] = 0
				val[2] = 0
			} else if (val[1] !== this.valueArr[1]) {
				val[2] = 0
			}
			this.valueArr = val
		},

		confirm() {
			let defaultVal = ""
			this.regionValue = `${this.region[this.valueArr[0]].name}-${this.region[this.valueArr[0]].children[this.valueArr[1]].name}-${this.region[this.valueArr[0]].children[this.valueArr[1]].children[this.valueArr[2]].name}`
			this.regionName = `${this.region[this.valueArr[0]].name},${this.region[this.valueArr[0]].children[this.valueArr[1]].name},${this.region[this.valueArr[0]].children[this.valueArr[1]].children[this.valueArr[2]].name}`
			defaultVal = `${this.region[this.valueArr[0]].id},${this.region[this.valueArr[0]].children[this.valueArr[1]].id},${this.region[this.valueArr[0]].children[this.valueArr[1]].children[this.valueArr[2]].id}`

			this.$emit("update:value", defaultVal)
			this.$emit("changeRegion", this.regionName)
			this.$refs.popup.close()
		},
		cancel() {
			this.$refs.popup.close()
		},
	},
	watch: {
		value: {
			handler(val) {
				if (val && this.type == "2") {
					this.regionValue = val.split(",").join("-")
				}
			},
			immediate: true,
		},
	},
}
</script>
<style lang="scss" scoped>
.popup {
	height: fit-content;
	width: 100%;
	background: #fff;
}

.picker-btn {
	display: flex;
	height: 100upx;
	width: 100%;
	line-height: 100upx;
	background: #fff;
	font-size: 34upx;
	z-index: 1;
	border-bottom: 1rpx solid #f8f8f8;

	.left {
		flex: 1;
		color: #0076ff;
		padding-left: 40upx;
		box-sizing: border-box;
	}

	.right {
		flex: 1;
		text-align: right;
		padding-right: 40upx;
		color: #fe4533;
		box-sizing: border-box;
	}
}

picker-view {
	width: 100%;
	height: 500rpx;
	display: relative;
}
.item {
	line-height: 100rpx;
	text-align: center;
}
</style>
